import './style.scss'
import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';

const Guide = () => {
  // 处理页面跳转相关的逻辑
  const navigate = useNavigate(); // Hook和自定义Hook,一定要写在组件的最外侧，不能写在函数里面
  function handleIconClick() {
    if(localStorage.getItem('token')){
      navigate('/home')
    } else {
      navigate('/account/login')
    }
  }
  // 处理动画相关的逻辑
  const ref = useRef<HTMLDivElement>(null!) //它永远都不会是一个null类型，永远都会是一个dom元素
  useEffect(()=>{
    ref.current.style.opacity = '1'
  }, [])
  return (
      <div ref={ref} className="page guide-page">
        {/*由于涉及到webpack打包的问题，所以这里要这样引入图片*/}
        <img
          className="main-pic"
          src={require('../../images/halg_logo_icon_@2x.png')}
          alt='引导图' />
          <p className='title'>欢乐购</p>
          <img
          className="sub-pic"
          src={require('../../images/slogn_word_icon_@2x.png')}
          alt='引导图' />
          <div className='iconfont arrow-icon' onClick={handleIconClick}>&#xe60c;</div>
      </div>
    )
}

export default Guide;